<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        浮动
            float:left; 左浮动(靠左 从左向右)
            float:right; 右浮动（靠右  从右向左）
            float:none; 不浮动(默认值)

            注意
                子元素的宽度和高度相加不能大于父元素的宽度和高度
                如果是上下排列，一定一定不能加浮动

            脱离文档流,不占位（容器），不会与文字，表单，插入图片发生重叠

            什么时候情况下要用浮动
                想让一个竖着的元素横着走，这个时候要用浮动 常用
                图文混排效果 
         
     -->
     <style>
        
         .box{
             width:1000px;
             height:600px;
             border: solid 2px red;
         }
         .box1{
             width:300px; height:400px; background: green;
             float:left;
         }
         .box2{
             width:300px; height:300px; background: blue;
             float:left;
         }
         .box3{
             width:400px; height:300px; background: yellow;
             float:left;
         }
    
     </style>
</head>
<body>

    <div class="box">  
        <div class="box1">1</div>
        <div class="box2">雪在烧雪在烧雪在烧雪在烧雪在烧雪在烧雪在烧雪在烧雪在烧雪在烧雪在烧雪在烧雪在烧雪在烧雪在烧雪在</div>
       
        <div class="box3"></div>
    </div>

  
</body>
</html>